<template>
  <div class="direct-decision-wrap">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="title-card">
          <span class="title-name">{{groupName}}</span>
          <span class="title-points-num" v-show="deductNum > 0" >{{'-'+deductNum}}</span>
          <span class="title-points-desc">{{desc}}</span>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="content-card">
          <div class="points-card-item" v-for="(item, index) in dataList" :key="index">
            <p v-if="item.deduct > 0" class="points-num color-1">{{'-' + item.deduct}}</p>
            <p v-else class="points-num iconfont icon-duigou color-3"></p>
            <el-row type="flex" justify="space-between">
              <el-col :span="6">
                <img v-if="item.icon" class="sys-icon" :src="item.icon">
              </el-col>
              <el-col :span="18">
                <p class="sys-name">{{item.name}}</p>
                <p class="points-desc">{{item.deductDetails.length>0?item.deductDetails[0].desc:''}}</p>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSafetyGroup } from '@/api/home'

export default {
  name: 'DirectDecision',
  props: {
    orgId: {
        required: true
    },
    safetyRecordId: {
        required: true
    },
    groupId: {
        required: true
    },
  },
  data () {
    return {
      groupName: '',
      desc: '',
      deductNum: '',
      dataList: [],
    }
  },
  created() {
    this.getDetailData()
  },
  methods: {
    getDetailData() {
      let that = this
      let parames = {
        orgId: that.orgId,
        groupId: that.groupId,
        safetyRecordsId: that.safetyRecordId
      }
      getSafetyGroup(parames).then(res => {
        if(res.status === 200) {
          that.groupName = res.data.groupName || '直接判定项'
          that.deductNum = res.data.deduct
          that.desc = res.data.title
          that.dataList = res.data.details
        }
      })
    },
    // 更新/刷新模块
    refreshModel() {
      this.getDetailData()
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.direct-decision-wrap {
  .content-card{
    display: flex;
    border: none;
    padding: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    .points-card-item {
      .points-num {
        text-align: right;
        font-size: 16px;
        font-weight: 100;
      }
    }
  }
}
</style>
